import React, { Component } from 'react';
import autoBind from 'react-autobind';
import { Link, browserHistory } from 'dva/router';
import { SearchBar, List, Icon } from 'antd-mobile';

// style
import styles from './index.css';
import IconfontStyle from '../../../assets/iconfont/iconfont.css';

// widget
import HomeSidebar from '../../Common/HomeSidebar';

class HomeTop extends Component {
	constructor(props) {
        super(props)
        autoBind(this)

        this.state = {
        	isShowSidebar: false
        }
    }
    onToggleSidebar() {
    	this.setState({
    		isShowSidebar: true
    	})
    }
    onSubmitSearch(val) {
    	browserHistory.push(`/search?searchKey=${val}`)
    }
    onSubmitSearchSidebar() {
    	let value = this.searchInput.value;
    	this.onSubmitSearch(value)
    }
	render() {
	 	return (
	 		<div className={`${styles.hometop} home-top-container`}>
	 			<img 
	 				style={{width: '0.40rem'}} 
	 				onClick={this.onToggleSidebar} 
	 				className={`${styles['home-top-search-icon']}`}
	 				src={require('../../../assets/home/home-top-search.png')} />

	 			<SearchBar 
	 				className={styles['home-top-search']}
	 				placeholder="搜索关键字"
	 				onSubmit={this.onSubmitSearch}
	 				showCancelButton={false}
	 				/>

	 			<HomeSidebar 
                    isShowSidebar={this.state.isShowSidebar} 
                    onClose={() => this.setState({ isShowSidebar: false })} 
                    {...this.props}
                />
	 		</div>
	  	);
	}
};

HomeTop.propTypes = {
};

export default HomeTop
